<template>
	<div class="stratop">
		<div class="topTitle">
			<svg-icon icon-class="alarun" style="color:#5cd9e8; "></svg-icon>
			<span class="fs-xl text mx-2">近12个月统计情况</span>
		</div>
		<div id="nearYear" style="height:70%;"></div>
	</div>
</template>

<script>
	const echarts = require("echarts");
	import api from "@/http/api";
	export default {
		data() {
			return {
				chart: null,
				item: "",
				interval: "10000",
				option: "",
				type: 0,
			};
		},
		mounted() {
			this.chart = echarts.init(document.getElementById("nearYear"));
			this.option = {
				// title: {
				// 	text: "",
				// 	x: "center",
				// 	y: 0,
				// 	textStyle: {
				// 		color: "#B4B4B4",
				// 		fontSize: 8,
				// 		fontWeight: "normal"
				// 	}
				// },
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(255,255,255,0.1)",
					axisPointer: {
						type: "cross",
						crossStyle: {
							color: '#999'
						}
						// label: {
						// 	show: true,
						// 	backgroundColor: "#7B7DDC"
						// }
					}
				},
				legend: {
					textStyle: {
						color: "#B4B4B4"
					},
					x: 'center',
					y: 'bottom',
					data: ['入库', '出库', '借用']

				},
				// grid: {
				// 	x: "5%",
				// 	width: "90%",
				// 	y: "4%"
				// },
				xAxis: [{
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					axisLine: {
						lineStyle: {
							color: "#B4B4B4"
						}
					},
					// axisTick: {
					// 	show: false
					// },
					axisPointer: {
						type: 'shadow'
					}

				}],
				yAxis: [{
						type: 'value',
						name: '数量',
						// min: 0,
						// max: 1500,
						// interval: 150,
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#B4B4B4"
							}
						},
						axisLabel: {
							formatter: "{value}"
						}
					},

				],
				series: [{
						name: '入库',
						type: "bar",
						data: [],

						// barWidth: 10,
						// itemStyle: {
						// 	normal: {
						// 		opacity: 1,
						// 		barBorderRadius: 5,
						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 				offset: 0,
						// 				color: "#5e69ff"
						// 			},
						// 			{
						// 				offset: 1,
						// 				color: "#ffa4f3"
						// 			}
						// 		])
						// 	}
						// },
						// yAxisIndex: 0,

						// label:{
						// 	style: {
						// 	  fontSize: 10
						// 	}
						// }
					},
					{
						type: "bar",
						name: '出库',
						// barWidth: 10,
						// itemStyle: {
						// 	normal: {
						// 		opacity: 1,
						// 		barBorderRadius: 5,
						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 				offset: 0,
						// 				color: "#5e69ff"
						// 			},
						// 			{
						// 				offset: 1,
						// 				color: "#ffa4f3"
						// 			}
						// 		])
						// 	}
						// },
						yAxisIndex: 0,
						data: [],
						// label:{
						// 	style: {
						// 	  fontSize: 10
						// 	}
						// }
					},
					{
						type: "bar",
						name: '借用',
						// barWidth: 10,
						// itemStyle: {
						// 	normal: {
						// 		opacity: 1,
						// 		barBorderRadius: 5,
						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 				offset: 0,
						// 				color: "#5e69ff"
						// 			},
						// 			{
						// 				offset: 1,
						// 				color: "#ffa4f3"
						// 			}
						// 		])
						// 	}
						// },
						yAxisIndex: 0,
						data: [],
						// label:{
						// 	style: {
						// 	  fontSize: 10
						// 	}
						// }
					},
				]
			};
			this.chart.setOption(this.option, true);
			// var category = [];
			// var data = []
			//	this.draw(category, data);
			//	setInterval(this.changeColor, 1000);
			this.fetchData();
		},
		methods: {
			fetchData() {
				this.$http.get('/API/getLastYear', )
					.then(response => {
						if (response.data.code == 0) {

							let map = response.data.data;
							let datestr = map.dayStr;
							let paQty = map.paQty;
							let pickQty = map.pickQty;
							let pyQty = map.pyQty;


							// let alarm = "";
							// alarm = response.data.data;

							// let kdata = [],
							// 	vdata = [];
							// alarm.forEach((item) => {

							// 	let zonename = item.zonename;
							// 	// let zonenametmp =zonename.split('').join('\n')
							// 	let zonenametmp = '';
							// 	if (zonename && zonename.length > 3) {
							// 		zonenametmp = zonename.slice(0, 3) + '\n' + zonename.slice(3);
							// 	} else {
							// 		zonenametmp = zonename;
							// 	}

							// 	kdata.push(zonenametmp)
							// 	let total = item.total;
							// 	let used = item.used;
							// 	vdata.push(used * 100 / total);

							// })


							let sdate = datestr.map((item) => {
								return item.substr(item.substring().lastIndexOf('-') + 1, 2);
							})

							// this.item = response.itemSingle;
							// let kdata = [],
							// 	vdata = [];
							// kdata = Object.keys(this.item);
							// vdata = Object.values(this.item);
							if (document.getElementById("location")) {
								this.draw(sdate, paQty, pickQty, pyQty);
								//this.initChart();
								setTimeout(this.fetchData, this.interval);
							}
						}
					}).catch(err => {
						if (document.getElementById("location")) {
							setTimeout(this.fetchData, this.interval);
						}
					})
			},

			draw(category, data, data1, data2) {
				// 基于准备好的dom，初始化echarts实例
				this.option.xAxis[0].data = category;
				this.option.series[0].data = data;
				this.option.series[1].data = data1;
				this.option.series[2].data = data2;
				this.chart.setOption(this.option, true);

			},
			changeColor() {
				switch (this.type) {
					case 0:
						this.option.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#5e69ff"
						}, {
							offset: 1,
							color: "#ffa4f3"
						}])
						break;
					case 1:
						this.option.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#1911ff"
						}, {
							offset: 1,
							color: "#e653ff"
						}])
						break
				}
				this.type = 1 - this.type;
				this.chart.setOption(this.option, true);
			}
		},
		// mounted() {
		// 	this.fetchData()
		// },

		destroyed() {
			window.onresize = null;
		}
	};
</script>

<style lang="scss" scoped>
	.stratop {
		display: flex;
		flex-direction: column;
		height: 100%;
		text-align: center;

		.topTitle {
			height: 10%;
			padding: 10px;

		}

		#bottomLeftChart {
			flex: 2;
		}
	}
</style>
